<template>
  <div style="text-align: center;">
    <h2 style="border-bottom: 1px solid gray;margin-bottom:40px;margin-top:10px;">Research Overview</h2>
    <img v-for="(imgUrl,i) in imgUrls" :key="i" :src="imgUrl" style="width: 1000px;">
    
    <h2 style="border-bottom: 1px solid gray;margin:60px auto;">Research Areas</h2>
    <OverviewCard 
      v-for="(i,index) in overview" :key="index"
      :title  =   "i.title"
      :detail =   "i.detail"
      :imgUrl =   "i.imgUrl"
      :rid    =   "index+1"
    
    />
  </div>
</template>

<script>
import OverviewCard from "./OverviewCard.vue"

export default {
  components:{OverviewCard},
  data() {
    return {
      overview: [],
      imgUrls: [],
    };
  },
  created() {
    this.$http.get('/json/ResearchOverview.json').then((response) => {
      console.log(response);
      this.overview = response.data.overview;
      this.imgUrls = response.data.imgUrls;
    });
  }

 };
</script>

<style lang="less" scoped>

</style>
